@include b(menu-design-menu-set-drawer){
    background-color: white ;

    .el-drawer__header{
        padding: 20px 0 0;
        margin-bottom: 0;
    }
    @include e('group-icon'){
        cursor: pointer;
    }
    @include b(menu-design-content){
        height: 100%;
        padding: getCssVar('spacing', 'base');
        overflow: auto;
        @include e('menu-item'){
            @include m('children'){
                padding-left: 32px;
                @include when('collapse'){
                    height: 0;
                    overflow: hidden;
                }
            }
        }
        @include e('menu-item-content'){
            display: flex;
            align-items: center;
            width: 100%;
            height: 40px;
            padding: 0 getCssVar(spacing, base-tight);
            @include when('is-menuitem'){
                &:hover{
                    background-color: getCssVar(color, bg,0);
                }
            }

            @include m('label'){
                display: flex;
                flex:1;
                align-items: center;
                color: getCssVar(color,black);

                i{
                    width: 16px;
                    text-align: center;
                }
            }
            @include m('label-content'){
                display: flex;
                flex: 1;
                flex-direction: row;
                align-items: center;
                justify-content: left;
                margin-left: 5px;
                font-size:getCssVar(font-size, header-6) 
            }
            @include m('checks'){
                display: flex;
                flex: 0;
                flex-direction: row;
            }
        }
        @include e('menu-seperator'){
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
        }

        // .el-tree {
        //     .el-tree-node__content {
        //         height: 40px;
        //         padding: 0 getCssVar(spacing, base-tight);
        //         font-size: getCssVar(font-size, header-6);

        //         &:hover {
        //             .#{bem(menu-design, drag-icon)} {
        //                 display: block
        //             }

        //             .el-tree-node__expand-icon {
        //                 opacity: 0;
        //             }
        //         }
        //     }
        // }
        .#{bem(menu-design, icon)} {
            @include flex(row, center, center);
        
            width: getCssVar(width-icon, large);
            height: getCssVar(width-icon, large);
            margin-right: getCssVar(spacing, tight);
        }
        .#{bem(menu-design, drag-icon)} {
            position: absolute;
            left: getCssVar(spacing, tight);
            display: none;
            fill: getCssVar(color, primary, hover);
        }
    }
    @include b(menu-design-header){
        height: 64px;
        padding: 20px;
        border-bottom: 1px solid var(--ibiz-color-border);
        @include flex(row, space-between, center);
        @include e('caption'){
            padding: 0 getCssVar('spacing', 'base');
            @include e(text) {
                position: relative;
                height: 100%;
                padding-left: getCssVar('spacing', 'base');
                font-size: getCssVar('font-size', 'header-5');
                font-weight: getCssVar('font-weight', 'regular');
                color: getCssVar('color', 'text', 0);
            
                @include flex(row, flex-start, center);
            
                &::before {
                position: absolute;
                top: 50%;
                left: 0;
                width: 4px;
                height: 20px;
                content: '';
                background-color: getCssVar('color', 'primary');
                border-radius: 2px;
                transform: translateY(-50%);
                }
            }
        }
        @include e(menu-design-action){
            margin-right: 64px;
        }
    }
}
